<template>
  <div>
    <!-- 表格组件将放这里 -->
    <!-- 自定义操作类型列 -->
    <BasicTable @register="registerTable">
      <!-- 自定义操作类型列 -->
      <template #optypeRender="{ record }">
        <Tag v-if="record.optype === 'add'" color="green">新增</Tag>
        <Tag v-else-if="record.optype === 'update'" color="blue">修改</Tag>
        <Tag v-else-if="record.optype === 'delete'" color="red">删除</Tag>
        <Tag v-else>{{ record.optype }}</Tag>
      </template>

      <!-- 添加工具栏按钮(可选) -->
      <template #toolbar>
        <a-button type="primary" @click="onAddPoints">新增</a-button>
      </template>

      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              label: '编辑',
              onClick: onEditPoints.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              label: '删除',
              color: 'error',
              popConfirm: {
                title: '是否确认删除',
                confirm: onDeletePoints.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>

    <!-- 弹窗组件将放这里 -->
    <AddOrUpdatePoints
      @register="registerAddOrUpdateForm"
      @success="afterSuccess"
    ></AddOrUpdatePoints>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable, TableAction, useTable } from '/@/components/Table';
  import { Tag } from 'ant-design-vue';

  //引入子组件
  import AddOrUpdatePoints from './AddOrUpdatePoints.vue';

  import { pointsTableColumns, queryConditionFormSchema } from './points.data';
  import { queryPoints, deletePoints } from '/@/api/demo/timeseries';
  import { OperationTypeEnum } from '/@/enums/appEnum';
  import { useMessage } from '/@/hooks/web/useMessage';

  //使用modal弹出窗口
  import { useModal } from '/@/components/Modal';
  const { createMessage } = useMessage();

  const [registerAddOrUpdateForm, { openModal: openAddOrUpdateForm }] = useModal();
  const [registerUsersTable, { openModal: openUsersTable }] = useModal();
  const [registerSetParamsForm, { openModal: openSetParamsForm }] = useModal();

  export default defineComponent({
    name: 'TimeSeriesPointsLog',
    components: { TableAction, BasicTable, Tag, AddOrUpdatePoints },
    setup() {
      const [registerTable, { reload }] = useTable({
        title: '时序点号维护',
        api: queryPoints,
        columns: pointsTableColumns,
        useSearchForm: true,
        formConfig: {
          labelWidth: 80,
          schemas: queryConditionFormSchema,
          showResetButton: false,
          submitButtonText: true,
          validateFirst: true, // 验证通过后才提交
        },
        rowKey: 'id', // 根据实际返回数据中唯一标识字段来设置
        pagination: true,
        showTableSetting: true,
        showIndexColumn: true,
        canResize: true,
        bordered: true,

        actionColumn: {
          width: 150,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: 'right',
        },
        // 其他配置...
      });
      /*
       * 新增窗口
       * */
      function onAddPoints() {
        //使用props传递数据至子组件，在data参数中指定
        console.log('添加新记录');
        openAddOrUpdateForm(true, { op: OperationTypeEnum.ADD });
      }

      /*
       * 编辑窗口
       * */
      function onEditPoints(record: Recordable) {
        console.log('=============================>', record.pointid);
        openAddOrUpdateForm(true, { op: OperationTypeEnum.EDIT, dataId: record.pointid });
      }

      /*
       * 删除
       * */
      function onDeletePoints(record: Recordable) {
        deletePoints(record.pointid)
          .then((res) => {
            console.log('res', res);
            // 判断返回的状态码
            if (res == undefined && (res == null || Object.keys(res).length == 0)) {
              createMessage.success('删除成功。', 2);
              afterSuccess();
            }
          })
          .catch((ex) => {
            console.log('catch', ex);
            createMessage.error(ex.msg);
          });
      }
      /**
       * 弹窗确认操作之后刷新页面
       */
      function afterSuccess() {
        reload();
      }

      return {
        registerTable,
        registerAddOrUpdateForm,
        onAddPoints,
        onEditPoints,
        onDeletePoints,
        pointsTableColumns,
        afterSuccess,
      };
    },
  });
</script>
